<template>
  <div class="goods">
  	    <!--left-->
        <div class="menu-wrapper" ref="menuwrapper">
           <ul><!-- class 计算属性的值 === 当前ul li的index下标 就显示current  -->
           	<li v-for="(item,index) in goods" class="menu-item" :key="index" :class="{'current':currentIndex==index}" 
           		@click="selectMenu(index,$event)">
           		<span class="text border-bottom">
           			   <span  v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
           			  {{item.name}}
           		</span>
           	</li>
           </ul>
        </div>
        <!--right-->
        <div class="foods-wrapper" ref="foodswrapper">
        	 	<ul>
        	 		<li    v-for="(item,index) in goods" class="food-list food-list-hook" :key="index">
        	 			<h1 class="title">{{item.name}}</h1>
        	 			<ul>
        	 				<li @click.stop.prevent="selectFood(food,$event)" v-for="(food,index) in item.foods" class="food-item border-bottom" :key="index">
        	 					<div class="icon">
        	 						<img width="57" height="57" :src="food.icon">
        	 					</div>
        	 					<div class="content">
        	 						<h2 class="name">{{food.name}}</h2>
        	 						<p class="desc">{{food.description}}</p>
        	 						<div class="extra">
        	 							<span class="count">11月售{{food.sellCount}}份</span>
        	 							<span>好评率{{food.rating}}%</span>
        	 						</div>
        	 						<div class="price">
        	 							<span class="now">&yen;{{food.price}}</span><span class="old" v-show="food.oldPrice">&yen;{{food.oldPrice}}</span>
        	 						</div>
        	 						<!--按钮加减组件-->
        	 						<div class="cartcontrol-wrapper">
        	 							<cartcontrol :food="food" :xl="22"  @cart="inc($event.target)"></cartcontrol>
        	 						</div>
        	 					</div>
        	 				</li>
        	 			</ul>
        	 		</li>
        	 	</ul> 
        </div>
        <!--shopcart  数据是在router-view里面传递的-->   
        <shopcart ref="shopcart" :selectFoods="selectFoods" :delivery-price="seller.deliveryPrice"  :min-price="seller.minPrice"></shopcart>
        
         <food :food="selectedFood" ref="food"></food>
  </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import shopcart from '@/components/shopcart/shopcart'
import cartcontrol from '@/components/cartcontrol/cartcontrol'
import food from '@/components/food/food';
export default {
  name: 'goods',
  props:{
  	seller:{
  		type:Object
  	}
  },
  data () { 
    return {
     goods:[],
     listHeight:[],
     scrollY:0,
     selectedFood: {}
    }
  }, 
  created() {
  	 this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
		 this.getgoodsfo()
		 
	 },
	 computed:{
	 	currentIndex(){//实时获取index下标
	 		 for (let i=0;i<this.listHeight.length; i++) { //遍历高度this.listHeight的数组 比较在哪一个区间
	 		 	  let height1=this.listHeight[i];
	 		 	  let height2=this.listHeight[i+1]; 
	 		 	  if (!height2||(this.scrollY>=height1&&this.scrollY<height2)){ //最后一个区间和第一个区间都做了显示判断
	 		 	  		return i
	 		 	  }
	 		 }
	 		 return 0
	 	},
	 	selectFoods(){ //循环添加用户所选择的商品==》push数组里面 
	 		let foods=[];
	 		this.goods.forEach((good) =>{ //遍历goods数组
	 			good.foods.forEach((food)=>{//获取里面每一个商品里面的数组 看里面是否有count的属性
	 				if(food.count){// 如果有count 说明用户点击选择了
	 					foods.push(food);
	 				}
	 			})
	 		})
	 		return foods;
	 	}
	 },
   methods:{
		getgoodsfo(){
			axios.get('../../static/data.json')
			.then(this.getgoods)
		},
		getgoods(res){
			res=res.data;
			if(res.goods&&res){
				this.goods=res.goods;
				this.$nextTick(()=>{ //等DOM加载完全之后再执行该方法
					this._initscoll();
					this._calculateHeight()//计算左侧的高度
				})
		  }
		},
		_initscoll(){ //滚动条执行的方法
			this.meunscroll=new BScroll(this.$refs.menuwrapper,{//左侧商品名称的滚动条
				click:true
			})
			this.foodsscroll=new BScroll(this.$refs.foodswrapper,{//右侧商品详情滚动条
				 click:true,
				 probeType: 3  //实时获取Y轴的坐标 注意大写(probeType)参数
				 
			})
			
			this.foodsscroll.on('scroll',(pos)=>{ //实时获取滚动条暴露Y轴的坐标
				this.scrollY=Math.abs(Math.round(pos.y)) //Math.round 方法可把一个数字舍入为最接近的整数。 如何把Y轴和index做关联？currentIndex
			})
		},
		_calculateHeight(){ //计算左侧的高度
			let foodlist=this.$refs.foodswrapper.getElementsByClassName("food-list-hook"); //每一层小的li的高度
			let height=0;//临时变量
			this.listHeight.push(height)
			for (let i=0;  i<foodlist.length;i++) {//循环遍历每一个li
				let item=foodlist[i];
				height+=item.clientHeight;//取出每一个li的大小相加
				this.listHeight.push(height)//把每一个高度遍历相加到 listHeight
			}
		},
		selectMenu(index,event){//用户点击跳转到滚动相应的位子
			if(!event._constructed){ //取消2次点击的效果
				return false;
			}
			let foodlist=this.$refs.foodswrapper.getElementsByClassName("food-list-hook"); //每一层小的li的高度
			let el=foodlist[index];
			this.foodsscroll.scrollToElement(el,300)//调用点击跳转的方法
		},
		_drop(target){
			// console.log("33")
			//体验异步优惠体验 动画小球
			this.$nextTick(()=>{
				this.$refs.shopcart.drop(target)
			})
			
			
		},
      selectFood(food, event) {
        if (!event._constructed) {
          return;
        }
        this.selectedFood = food;
        this.$refs.food.show();
      },
      
		inc(target){ //接受子组件传递过来的数据 cartcontrol
			// console.log("22")
			this._drop(target)
			
		}
   },
   components:{
   	shopcart,
   	cartcontrol,
   	food
   }

}
</script>


<style lang="less"  scoped>
		.goods{
			display: flex;
			position: absolute;
			top: 174px;
			bottom: 46px;
			width: 100%;
			overflow: hidden;
			 .menu-wrapper{
			 	flex: 0 0 80px;
			 	width: 80px;
			 	background: #f3f5f7;
			 	.menu-item{
					display: table;
					height: 54px;
					width: 56px;
					line-height: 14px;
					padding:0 12px;
					&.current{
						 position: relative;
						 margin-top: -1px;
						 z-index: 10;
						 background: #fff;
						 font-weight: 700;
						 .text{
							 &.border-bottom{
						  	border:none ;
						  }
						 }
					}
					.text{
						font-size: 12px;
						display: table-cell;
						width: 56px;
						vertical-align: middle;
					  &.border-bottom{
					  	border: rgba(7,17,27,0.1);
					  }
					.icon{
							display: inline-block;
							width: 16px;
							height: 16px;
							margin-right: 2px;
							vertical-align: top;
							&.decrease{
								 background: url(img/decrease_3@3x.png);
								 background-repeat: no-repeat;
							   background-size:cover;
							}
							&.discount{
								background: url(img/discount_3@3x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.guarantee{
								background: url(img/guarantee_3@3x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.invoice{
								background: url(img/invoice_3@3x.png);
								background-repeat: no-repeat;
							  background-size:cover;
							}
							&.special{
								background: url(img/special_3@3x.png);
								background-repeat: no-repeat;
						   	background-size:cover;
							}
						}
				 }
				 }
			 	}
		 .foods-wrapper{
				flex: 1;
				.title{
					padding-left: 14px;
					height: 26px;
					line-height: 26px;
					border-left: 2px solid #d9dde1;
					font-size: 12px;
					color: rgb(147,153,159);
					background: #f3f5f7;
				}
				.food-item{
					display: flex;
					margin-left: 18px;
					padding-bottom: 18px;
					&.border-bottom{
					  	border: rgba(7,17,27,0.1);
					  }
					&:last-child{
					      	border-bottom: none;
					      	margin-bottom: 0;
					  }
					.icon{
					  	flex:  0 0 57px;
					  	margin-right: 10px;
					  }
					.content{
						flex: 1;
						.name{
							margin: 2px 0 8px 0;
							height: 14px;
							line-height: 14px;
							font-size: 14px;
							color: rgb(7,17,27);
						}
						.desc,.extra{
							line-height: 10px;
							font-size: 10px;
							color:rgba(147,153,159) ;
						}
						.desc{
							margin-bottom: 8px;
							line-height: 12px;
						}
						.extra{
						 .count{
								margin-right: 12px;
							}
						}
						.price{
						font-weight: 700;
						line-height: 24px;
						 .now{
						 	margin-right: 8px;
						 	font-size: 14px;
						 	color:rgb(240,20,20);
						 }
						 .old{
						 	text-decoration: line-through;
						 	font-size: 10px;
						 	color:rgb(147,153,159) ;
						 }
						}
						.cartcontrol-wrapper{
							position: absolute;
							right: 0;
							bottom: 12px;
						}
					}
				}
				
       }
		}
</style>
